<template>
  <view class="com-tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
    <view class="tabbar-item" v-for="(item, index) in tabbarConfig" :key="item.pagePath"
      @click="toTabbarPage(item.pagePath)">
      <template v-if="item.isScan">
        <view class="charge-container"
          @click="toggleChargeType">
          <img class="charge-icon" :src="chargeType === ChargeType.Scan ? ChargeScanIcon : ChargeShoudongIcon" alt="">
          {{ chargeType === ChargeType.Scan ? '扫码充电' : '手动充电' }}
          <view>
            |
          </view>
          <img class="switch-icon" :src="ChargeSwitchIcon" alt="">
        </view>
      </template>
      <template v-else>
        <img :src="currentPage.route === item.pagePath ? item.customIcon : item.customIconUnActive" alt="">
        {{ item.text }}
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import pages from "@/pages.json"
import {
  TabbarHomeActive,
  TabbarHomeUnActive,
  TabbarIndexActive,
  TabbarIndexUnActive,
  ChargeScanIcon,
  ChargeShoudongIcon,
  ChargeSwitchIcon
} from "@/static";
import { useChargeStore } from "@/store/charge";
import { ChargeType } from "@/types/enum";
import { navigateServices } from "@/utils/navigate";
import { computed, ref } from "vue";
const safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets?.bottom;

// 获取当前页面路由
const _pageList = getCurrentPages(); // 获取页面栈
const currentPage = _pageList[_pageList.length - 1]; // 当前页面

const chargeStore = useChargeStore();

const chargeType = computed(() => chargeStore.chargeType);

const toggleChargeType = () => {
  chargeStore.toggleChargeType();
};

const tabbarConfig = ref<((typeof pages.tabBar.list)[number] & {
  customIcon: string,
  customIconUnActive: string,
  isScan?: boolean
})[]>(pages.tabBar.list.map(v => ({
  ...v,
  customIcon: v.pagePath === 'pages/index/index' ? TabbarIndexActive : TabbarHomeActive,
  customIconUnActive: v.pagePath === 'pages/index/index' ? TabbarIndexUnActive : TabbarHomeUnActive
})))

const toTabbarPage = (path: string) => {
  navigateServices.switchTab({
    // 微信的毛病 tabbar必须不能以/开头 但是跳转又需要
    url: path.charAt(0) === '/' ? path : '/' + path
  })
}

tabbarConfig.value.splice(1, 0, {
  pagePath: 'pages/index/index',
  text: '首页',
  isScan: true
} as any)
</script>

<style lang="less">
.com-tabbar {
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 8vw;
  padding-top: 2vw;
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  .tabbar-item {
    display: flex;
    flex-direction: column;
    gap: 1vw;

    image {
      width: 8vw;
      height: 8vw;
    }

    .charge-container {
      display: flex;
      align-items: center;
      background: #01C07B;
      border-radius: 99px;
      padding: 2vw 6vw;
      box-shadow: 0px 3px 9px 0px rgba(1, 192, 123, 0.4);
      border-radius: 100px;
      color: #fff;
      gap: 2vw;

      .charge-icon {
        width: 8vw;
        height: 8vw;
      }

      .switch-icon {
        width: 8vw;
        height: 8vw;
      }
    }
  }
}
</style>